<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
		
			pre {
				font-family: "Consolas", monospace;
				font-size: 110%;
				color: #444444;
				margin-left: 1em;
			}
		
			h3 {
				font-family: "Calibri", sans-serif;
				font-size: 140%;
				border: 1px solid black;
				padding-left: 2px;
				background-color: #EEEEFF;
				clear: both;
			}
					
			table {
				margin-left: 1em;
				border-collapse: collapse;
				border-style: solid;
				border-color: black;
				border-width: 2px;
				clear: both;
				width: auto;
				margin-bottom: 3em;
			}
			
			.even {
				background-color: #EEEEFF;
			}
			
			table tbody {
				font-family: "Consolas", monospace;
				font-size: 100%;
			}
			
			table thead, table tfoot {
				font-family: "Calibri", sans-serif;
				font-size: 120%;
				background-color: LightSlateGray; /* Khaki */
				color: white; /* black */
			}
			
			table thead {
				border-bottom-style: solid;
				border-bottom-color: black;
				border-bottom-width: 2px;
			}
			table tfoot {
				border-top-style: solid;
				border-top-color: black;
				border-top-width: 2px;
			}
			table th, table td {
				text-align: left;
				border-width: 1px;
				border-left-style: solid;
				border-right-style: solid;
				border-left-color: black;
				border-right-color: black;
				padding: 2px;
				padding-left: 1em;
				padding-right: 1em;
			}
			table th {
				text-align: center;
			}
			
			.highlighted {
				background-color: #EEE8AA;
			}
		</style>
		<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
		<script type="text/javascript"> 
			$(document).ready(function() {
				$("table tbody tr:even").addClass("even");
				$("table tbody tr:odd").addClass("odd");
				$("table tbody tr").toggle(
					function()
					{
						$(this).addClass('highlighted');
					},
					function()
					{
						$(this).removeClass('highlighted');
					}
				);
				$("table thead,tfoot th").toggle(
					function(item)
					{
						var th = item.target || item.srcElement;
						$(this).closest("table").find("td").filter(":nth-child(" + (th.cellIndex + 1).toString() + ")").addClass("highlighted");
					},
					function(item)
					{
						var th = item.target || item.srcElement;
						$(this).closest("table").find("td").filter(":nth-child(" + (th.cellIndex + 1).toString() + ")").removeClass("highlighted");
					}
				);
			});
			
		</script> 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Query View</title>
	</head>
	<body>
		<h3 class="query">Query:</h3>
		<pre>select * from table;</pre>
		<h3>Results:</h3>
		<table>
			<thead>
				<tr>
					<th>Created</th>
					<th>Name</th>
					<th>Value</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Jan 1, 2000</td>
					<td>ThingA</td>
					<td>123.2</td>
				</tr>
				<tr>
					<td>Jan 2, 2000</td>
					<td>ThingB</td>
					<td>123.3</td>
				</tr>
				<tr>
					<td>Jan 3, 2000</td>
					<td>ThingC</td>
					<td>123.4</td>
				</tr>
				<tr>
					<td>Jan 4, 2000</td>
					<td>ThingD</td>
					<td>123.5</td>
				</tr>
				<tr>
					<td>Jan 5, 2000</td>
					<td>ThingE</td>
					<td>123.6</td>
				</tr>
				<tr>
					<td>Jan 6, 2000</td>
					<td>ThingF</td>
					<td>123.7</td>
				</tr>
				<tr>
					<td>Jan 7, 2000</td>
					<td>ThingG</td>
					<td>123.8</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<th>Created</th>
					<th>Name</th>
					<th>Value</th>
				</tr>
			</tfoot>
		</table>
	
		<h3 class="query">Query:</h3>
		<pre>select * from table;</pre>
		<h3>Results:</h3>
		<table>
			<thead>
				<tr>
					<th>Created</th>
					<th>Name</th>
					<th>Value</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Jan 1, 2000</td>
					<td>ThingA</td>
					<td>123.2</td>
				</tr>
				<tr>
					<td>Jan 2, 2000</td>
					<td>ThingB</td>
					<td>123.3</td>
				</tr>
				<tr>
					<td>Jan 3, 2000</td>
					<td>ThingC</td>
					<td>123.4</td>
				</tr>
				<tr>
					<td>Jan 4, 2000</td>
					<td>ThingD</td>
					<td>123.5</td>
				</tr>
				<tr>
					<td>Jan 5, 2000</td>
					<td>ThingE</td>
					<td>123.6</td>
				</tr>
				<tr>
					<td>Jan 6, 2000</td>
					<td>ThingF</td>
					<td>123.7</td>
				</tr>
				<tr>
					<td>Jan 7, 2000</td>
					<td>ThingG</td>
					<td>123.8</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<th>Created</th>
					<th>Name</th>
					<th>Value</th>
				</tr>
			</tfoot>
		</table>
	
	
	</body>
</html>
